<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件</title>
	<link rel="icon" href="../logo.png">
	<link rel="stylesheet" href="../style.css">
	<script src="../vue.js"></script>
	<style>
		body{
			margin-bottom: 40px;
		}
	</style>
</head>
<body>
	<p class="title">1.组件</p>
	<p class="subtitle">1.1使用组件</p>
	<div id="example">
		<my-component></my-component>
	</div>
	<script>
		// 注册组件
		Vue.component('my-component',{
			template:'<div>A custom component!</div>'
		})
		//创建根实例
		new Vue({
			el:'#example'
		})
	</script>

	<p class="subtitle">1.2局部注册</p>
	<div id="example2">
		<my-component></my-component>
	</div>
	<script>
		var Child = {
			template:'<div>A Custom Component</div>'
		}

		new Vue({
			el:"#example2",
			components:{
				'my-component':Child
			}
		})
	</script>

	<p class="subtitle">1.3 DOM模版解析</p>
	<div id="example3">
		<table>
			<tr is="my-row"></tr>
		</table>
	</div>
	<script>
		// 注册组件
		Vue.component('my-row',{
			template:'<tr>\
			<th>A custom component1!</th>\
			<th>A custom component2!</th>\
			<th>A custom component3!</th>\
			</tr>'
		})
		//创建根实例
		new Vue({
			el:'#example3'
		})
	</script>

	<p class="subtitle">1.4必须是函数</p>
	<div id="example4">
		<my-component></my-component>
	</div>
	<script>
		// 注册组件
		Vue.component('my-component',{
			template:'<div>{{message}}</div>',

			// data:{
			// 	message:'A custom component!'
			// }
			data:function () {
				return {
					message:'A',
				}
			}
		})
		//创建根实例
		new Vue({
			el:'#example4'
		})
	</script>

	<p class="subtitle">1.5必须是函数Demo with bug</p>
	<div id="example5">
		<simple-counter></simple-counter>
		<simple-counter></simple-counter>
		<simple-counter></simple-counter>
	</div>
	<script>
		var data = { counter : 0 }

		Vue.component('simple-counter',{
			template:'<button v-on:click="counter += 1">{{ counter }}</button>',
			// data 是一个函数，因此 Vue 不会警告，
  		// 但是我们为每一个组件返回了同一个对象引用
  		data:function(){
  			return data;
  		}
		})

		new Vue({
			el:'#example5'
		})
	</script>

	<p class="subtitle">1.6必须是函数Demo without bug</p>
	<div id="example6">
		<simple-counter></simple-counter>
		<simple-counter></simple-counter>
		<simple-counter></simple-counter>
	</div>
	<script>
		// var data = { counter : 0 }
		Vue.component('simple-counter',{
			template:'<button v-on:click="counter += 1">{{ counter }}</button>',
			// data 是一个函数，因此 Vue 不会警告，
  		// 但是我们为每一个组件返回了同一个对象引用
  		data:function(){
  			return {
  				counter:0
  			}
  		}
		})

		new Vue({
			el:'#example6'
		})
	</script>

	<p class="subtitle">1.7使用Prop传递数据</p>
	<div id="example7">
		<child msg="hello"></child>
	</div>
	<script>
		Vue.component('child',{
			props:['msg'],
			template:'<span>{{msg}}</span>'
		})

		new Vue({
			el:'#example7',
		})
	</script>

	<p class="subtitle">1.7.2使用Prop传递数据2</p>
	<div id="example8">
		<child v-bind:msg="msg"></child>
	</div>
	<script>
		Vue.component('child',{
			props:['msg'],
			template:'<span>{{msg}}</span>'
		})

		new Vue({
			el:'#example8',
			data:{
				msg:'hello!!!'
			}
		})
	</script>

	<p class="subtitle">动态prop</p>

	<div id="example9">
		<input v-model="parentMsg">
		<br/>
		<child v-bind:my-msg="parentMsg"></child>
	</div>

	<script>
		new Vue({
			el:'#example9',
			data:{
				parentMsg:'Message from parent'
			},
			components:{
				child:{
					props:['myMsg'],
					template:'<span>{{myMsg}}</span>'
				}
			}
		})
	</script>

	<p class="subtitle">单向数据流</p>
	<div id="example10">
		<p>{{total}}</p>
		<button-counter v-on:increment="incrementTotal"></button-counter>
	</div>
	<script>
		Vue.component('button-counter',{
			template:'<button v-on:click="increment">{{counter}}</button>',
			data:function () {
				return{
					counter:0
				}
			},
			methods:{
				increment:function(){
					this.counter+=1
					this.$emit('increment')
				}
			},
		})

		new Vue({
			el:'#example10',
			data:{
				total:0
			},
			methods:{
				incrementTotal:function(){
					this.total+=1
				}
			}
		})
	</script>

	<div id="example11">
		<current-input v-model="price"></current-input>
	</div>

	<script>
		Vue.component('current-input',{
			template:'\
			<span>\
				$<input ref="input" v-bind:value="value"\
				v-on:input="updateValue($event.target.value)">\
			</span>',
			props:['value'],
			methods:{
				updateValue:function(value){
					var formattedValue = value.trim()
					.slice(0,value.indexOf('.')+3)
					if(formattedValue !== value){
						this.$refs.input.value = formattedValue
					}
					this.$emit('input',Number(formattedValue))
				}
			}
		})

		new Vue({
		el:'#example11',
		data:{
				price:0
			}
		})
	</script>


	<p class="title">单个slot</p>
	<div id="demo">
		<!-- 父组件模板 -->
		<div>
			<h1>我是父组件的标题</h1>
			<my-com>
				<p>这是一些初始内容</p>
				<p>这是更多初始内容</p>
			</my-com>

			<my-com>
				<!-- <p>这是一些初始内容</p>
				<p>这是更多初始内容</p> -->
			</my-com>
		</div>
			
	</div>
	<script>
		//模板
		Vue.component('my-com',{
			template:'<div><h2>我是子组建的标题</h2>\
			<slot>只有在没有要分发的内容时才会显示</slot></div>',

		})
		new Vue({
			el:'#demo'
		})
	</script>

	<p class="title">具名slot</p>
	<div id="demo2">
		<!-- 组件 -->
		<app-layout>
			<div class="container">
				<header>
		    	<slot name="header">
		    	</slot>
			  </header>
			  <main>
			    <slot></slot>
			  </main>
			  <footer>
			    <slot name="footer"></slot>
			  </footer>
			</div>
		</app-layout>

		<app-layout></app-layout>
	</div>

	<script>
		Vue.component('app-layout',{
			// template:'<div>\
			// <h1 slot="header">这里可能是一个页面标题</h1>\
			// 	<p>主要内容的一个段落。</p>\
			//   <p>另一个主要段落。</p>\
			//   <p slot="footer">这里有一些联系信息</p>\
			// </div>',
			template:'<div>\
			<h1 slot="header">这里可能是一个页面标题</h1></div>'
		})

		new Vue({
			el:'#demo2'
			// el:'.container'
		})
	</script>
</body>
</html>